<template>
  <div>
    <nav class="main">
      <Logo />
      <ul>
        <li v-for="(item, index) in navBar">
          <div class="item flex flex-center flex-items-center" v-if="item.children && item.children.length > 0" @click="handleExpandMenu(index, true)">
            <div class="flex flex-center flex-items-center" v-if="item.icon">
              <Icon :type="item.icon" />
            </div>
            <span class="flex flex-center flex-items-center">
              {{ item.name }}
            </span>
          </div>
          <router-link class="item flex flex-center flex-items-center" :to="item.url" v-else>
            <div class="flex flex-center flex-items-center" v-if="item.icon">
              <Icon :type="item.icon" />
            </div>
            <span class="flex flex-center flex-items-center">
              {{ item.name }}
            </span>
          </router-link>
        </li>
      </ul>
    </nav>
    <transition name="el-fade-in-linear">
      <nav class="sub float" v-if="hasSub">
        <ul :style="'min-width: ' + sectionMinWidth + 'px'">
          <li class="sub-area" v-for="item in subMenu">
            <ul>
              <li class="sub-nav-section" v-for="section in item">
                <div v-if="section.children && section.children.length > 0">
                  <h3 class="title">{{ section.name }}</h3>
                  <ul class="sub-nav-menu">
                    <li v-for="menu in section.children">
                      <div class="item">
                        {{ menu.name }}
                      </div>
                    </li>
                  </ul>
                </div>

                <div class="item-no-child" v-else>
                  {{ section.name }}
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </transition>

    <transition name="el-fade-in-linear">
      <div class="mask" v-if="hasSub" @click="closeMask"></div>
    </transition>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";

import Logo from "./Logo";
export default {
  components: { Logo },
  data() {
    return {
      height: window.innerHeight,
      hasSub: false,
      // menu: [],
      subMenu: [],
    };
  },
  computed: {
    ...mapGetters({
      tabsBar: "settings/tabsBar",
      navBar: "settings/navBar",
    }),
    sectionMinWidth: function () {
      return this.subMenu.length * 170;
    },
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  mounted() {},
  methods: {
    getHeight() {
      this.height = window.innerHeight;
      console.log(this.height);
    },
    generateSubMenuList(index) {
      this.subMenu = [];
      let subHeight = 0;
      let subSection = [];

      let noChildItem = { children: [] };
      this.navBar[index].children.forEach((item) => {
        if (!item.children || item.children.length <= 0) {
          noChildItem.children.push(item);
        }
      });
      if (
        noChildItem.children.length > 0 &&
        this.navBar[index].children &&
        JSON.stringify(this.navBar[index].children[0]) !=
          JSON.stringify(noChildItem)
      ) {
        this.navBar[index].children.unshift(noChildItem);
      }

      this.navBar[index].children.forEach((item) => {
        if (item.children) {
          if (item.children.length * 20 + 60 + subHeight > this.height - 110) {
            this.subMenu.push(subSection);
            subSection = [];
            subHeight = 0;
          }
          subSection.push(item);
          subHeight += item.children.length * 20 + 60;
        } else {
          // if (subHeight + 20 > this.height - 110) {
          //   this.subMenu.push(subSection);
          //   subSection = [];
          //   subHeight = 0;
          // }
          // subSection.push(item);
          // subHeight += 20;
        }
      });
      if (subSection && subSection.length > 0) {
        this.subMenu.push(subSection);
      }
      console.log(this.subMenu);
    },
    toggleMenu() {
      this.hasSub = !this.hasSub;
    },
    closeMask() {
      this.hasSub = false;
    },
    handleExpandMenu(index, isClick = false) {
      if (
        this.navBar[index].children &&
        this.navBar[index].children.length > 0
      ) {
        // this.subMenu = this.navBar[index].children;
        this.generateSubMenuList(index);
        if (isClick) this.hasSub = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mask {
  left: 60px;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.05);
  z-index: 11;
}

.main {
  background-color: #f5f5f5;
  border-right: 1px #e8e8e8 solid;
  position: absolute;
  width: 60px;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  z-index: 13;
  ul {
    padding-right: 20px;
    box-sizing: content-box;
    width: 100%;
    flex: 1 1 100%;
    overflow-x: hidden;
    overflow-y: scroll;

    li {
      width: 60px;
      font-size: 14px;
      // height: 40px;
      line-height: 40px;
      cursor: pointer;
      .item {
        color: #696969;
        display: flex;
        i {
          width: 20px;
          height: 20px;
          font-size: 20px;
        }
        span {
          line-height: 32px;
        }
      }
    }

    li:hover {
      background-color: #fff;
    }

    .item:hover {
      color: #333;
    }

    .active {
      background-color: #fff;
      .item {
        color: #333;
      }
    }
  }
}

.sub.fixed {
  width: 132px;
  height: 100%;
  margin-left: 60px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #fff;
  border-right: 1px solid #ebedf0;
  z-index: 12;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 0 13px 0 #c3c3c3;
  ul {
    padding: 0 12px;
    width: 100%;
    list-style: none;
    text-align: center;
    margin: 5px 0;
  }

  li .item {
    position: relative;
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    padding: 5px 0;
    color: #323233;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
    background: inherit;
  }

  li:hover {
    background-color: #ebedf0;
  }

  .active {
    background-color: #ebedf0;
    .item {
      color: #323233;
      background-color: #ebedf0;
    }
  }
}

.sub.float {
  width: auto;
  height: 100%;
  margin-left: 60px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #fff;
  border-right: 1px solid #ebedf0;
  z-index: 12;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 0 13px 0 #c3c3c3;
  ul {
    list-style: none;
    .sub-area {
      float: left;
      width: 160px;
      padding: 0 12px;

      .title {
        position: relative;
        min-height: 28px;
        line-height: 28px;
        padding: 10px 10px 0 10px;
        color: #323232;
        font-size: 14px;
        font-weight: bold;
      }
      .sub-nav-section {
        // border-bottom: 1px solid #dfdfdf;
        padding: 0 12px 6px 12px;
        .sub-nav-menu {
          list-style: none;
          li {
            padding: 0 10px;
            &:hover {
              background-color: #ebedf0;
            }
            .item {
              position: relative;
              min-height: 26px;
              line-height: 26px;
              color: #696969;
              cursor: pointer;
              font-size: 14px;
              box-sizing: border-box;
              background: inherit;
            }
          }
        }
      }

      .item-no-child {
        padding: 0 10px;
        position: relative;
        min-height: 24px;
        line-height: 24px;
        color: #696969;
        cursor: pointer;
        font-size: 14px;
        box-sizing: border-box;
        background: inherit;
        &:hover {
          background-color: #ebedf0;
        }
      }
    }
  }

  .active {
    background-color: #ebedf0;
    .item {
      color: #323233;
      background-color: #ebedf0;
    }
  }
}
</style>